<template>
<!-- 商铺信息 -->
  <div id="message">
     <div id="nev">
          <div id="content">
            <h1>商铺信息</h1>
            <div id="messageTop">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="标题" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                  </el-form-item>
                  <div class="uploading">
                  <div class="uptitle">
                      <span>商铺logo</span>
                    </div>
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="ruleForm.description"></el-input>
                  </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                  </el-form-item>
                </el-form>
            </div>
        </div>
        <el-button type="primary" @click="update()" v-Promise="'promote:merchant:update'">保存更改</el-button>
     </div>
  </div>
</template>

<script>
import shopsmanage from "@/api/message.js";
export default{
   data() {
     var titles = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('商铺标题不能为空！'));
        }else{
          callback();
        }
     };
      var descrip = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('商铺描述不能为空！'));
        }else{
          callback();
        }
     };
      var addres = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('商铺地址不能为空！'));
        }else{
          callback();
        }
     };
      return {
        imageUrl: '',      
        ruleForm:{
          showType:"",
          title:"",
          description:"",
          address:""
        },
        rules: {
          title: [
            {
              validator: titles,
              trigger: "blur"
            }
          ],
          description: [
            {
              validator: descrip,
              trigger: "blur"
            }
          ],
          address: [
            {
              validator: addres,
              trigger: "blur"
            }
          ]
        }
      }
   },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 商铺列表
      message(){
         let _this=this
        shopsmanage.message().then(function(res){
         _this.ruleForm = {...res.data.data}
         _this.imageUrl=res.data.data.logoUrl
        })
      },
      // 更新
      update(){
        let _this=this
        shopsmanage.updates(_this.ruleForm,_this.imageUrl).then(function(res){
          console.log(res)
          if(res.data.errno==200){
            _this.$information.success('这是一条更改成功的提示消息')
            _this.message()
          }else{
            _this.$information.error('这是一条更改失败的提示消息')
          }
          
        })
      }
    },
     created(){
       this.message()
    },
     watch:{
    dialogFormVisible(){
      this.$nextTick(() => {
       this.$refs.ruleForm.clearValidate();
      })
    }
  }
}
</script>

<style scoped>
#message{
  width: 100%;
  height: 100%;
}
#nev{
  width: 90vw;
  height: 70vh;
  margin: auto !important;
}
#content{
  width: 90vw;
  height: 73vh;
  box-shadow:2px 5px 12px #3B2E32;
  border-radius:5px;
  margin-bottom: 15px;
}
#content h1{
  padding: 30px;
}
#messageTop{
  width: 70vw;
  margin: auto;
}
/* 表格 */
 .avatar-uploader .el-upload {
    border: 1px dashed #409EFF;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #409EFF;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .uploading{
    margin-left:54px;
    margin-bottom: 20px;
  }
  .uploading span{
    height: 0px ;
    color: #606266;
  }
  .avatar-uploader{
    margin-left:100px;
  }
  .uptitle{
    height: 0px;
  }
</style>